<script setup lang="ts">
import HeaderCom from '@/components/Layout/PageHeader/HeaderCom.vue'
</script>

<template>
  <div class="wrap">
    <div class="box dealer-box">
      <h1>经销商看板</h1>
      <HeaderCom
        class-name="dealer-header"
        :show-fun="false"
        title="经销商看板"
      />
    </div>

    <div class="box home-box">
      <h1>全球业绩样式</h1>
      <HeaderCom className="home-header" title="全球业绩" />
    </div>

    <div class="box supply-box">
      <h1>全球供应链</h1>
      <HeaderCom className="supply-header" title="全球供应链" />
    </div>

    <div class="box finance-box">
      <h1>全球财务</h1>
      <HeaderCom className="finance-header" title="全球财务" />
    </div>

    <div class="box human-box">
      <h1>全球人力</h1>
      <HeaderCom className="human-header" title="全球人力" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.box {
  margin-bottom: 20px;
  h1 {
    text-align: center;
    line-height: 500%;
  }
  :deep(.header) {
    position: relative;
  }
}
</style>
